<template>
    <div>
        <form>
            <slot></slot>
            <eagle-search>
                
            </eagle-search>
        </form>
    </div>
</template>
<script>
import eagleSearch from '../eagle-search/eagle-search.vue'
export default{
  components: { eagleSearch },
    name: "eagle-condition",
    props:{
        value:{
            type: Object,
            default: function() {
                return {}
            }
        },
        placeholder:{
            type: String,
		    default: '请输入关键字'
        },
        searchResults: {
            type: [Number, String],
            default: ""
        }
    },
    data(){
        return {
            keyword: "",
            defaultValue: this.searchResults,
        }
    },
    watch: {
        keyword(nVal) {
            // 双向绑定值，让v-model绑定的值双向变化
            this.$emit('input', nVal);
            // 触发change事件，事件效果和v-model双向绑定的效果一样，让用户多一个选择
            this.$emit('change', nVal);
        },
        searchResults(nVal) {
            this.defaultValue = nVal;
        },
        value: {
            immediate: true,
            handler(nVal) {
                this.keyword = nVal;
            }
        },

    },
    methods:{
        search() {
            this.$emit('search');
        },
        clearSearch(){
            this.$emit('clearSearch');
        }
    }
}
</script>
<style lang="less" scoped>
.city-search {
    background-color: #F7F8FA;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: 0.8rem;
    width: 94vw;
    margin: 2vw 4vw;
    border-radius: 8px;
    .search-icon {
      margin-left: 5px;
    }
    input {
      margin: 0 1.5vw;
      background-color: #F7F8FA;
      border: 0px;
      font-size: 14px;
      flex: 1
    }
    .clear-icon { color: #999;}
  }
</style>